import React, { useEffect, useState } from 'react'
import { NavBar, Tabs, Toast, Popup } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import styles from './list.module.css'
import axios from 'axios'

function Index() {
  const [visible5, setVisible5] = useState(false)
  let navigate = useNavigate()

  const [sp, setSp] = useSearchParams()
  const start = sp.get('start')
  const end = sp.get('end')

  const [list1, setList1] = useState([])

  const ListData = async () => {
    const res = await axios.get('/api/trip/airplane', { params: { start, end } })
    console.log('res', res)
    if (res.data.code == 200) {
      setList1(res.data.data)
    }
    else {
      Toast.show({
        icon: 'fail',
        content: res.data.message,
      })
    }

  }
  useEffect(() => {
    ListData()
  }, [])



  return (
    <div>
      <NavBar onBack={() => navigate('/')}>
        <span>{start}</span>
        <span>→</span>
        <span>{end}</span>
      </NavBar>
      <div className={styles.sj}>
        <p>
          <span>今天</span>
          <span>明天</span>
          <span>周日</span>
          <span>周一</span>
          <span>周二</span>
        </p>
        <p>
          <span>11/15</span>
          <span>11/16</span>
          <span>11/17</span>
          <span>11/18</span>
          <span>11/19</span>
        </p>
      </div>
      <div>
        <Tabs>
          <Tabs.Tab title='火车' key='fruits'>
            <div onClick={() => setVisible5(true)}>高级筛选</div>
            {
              list1.map((item, index) => {
                return <div key={index} className={styles.ListItem}>
                  <div className={styles.Header}>
                    <div className={styles.ListLeft}>
                      <p>
                        <span>{item.dst}</span>
                        <span>{item.td}</span>
                        <span>{item.ast}</span>
                      </p>
                      <p>
                        <span>{item.dasn}</span>
                        <span>{item.aat}</span>
                        <span>{item.aasn}</span>
                      </p>
                    </div>
                    <div className={styles.ListRight}>
                      <p style={{ color: 'red' }}>￥{item.lps[0].atp}</p>
                    </div>
                  </div>
                </div>
              })
            }
          </Tabs.Tab>
          <Tabs.Tab title='中转' key='vegetables'>
            中转
          </Tabs.Tab>
        </Tabs>
      </div>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        <div style={{margin:'30px',lineHeight:'20px'}}>
          <div>
            <h4>出发时段</h4>
            <span>0:00-6:00</span>
            <span>6:00-12:00</span>
            <span>12:00-18:00</span>
            <span>18:00-24:00</span>
          </div>
          <div>
            <h4>列车类型</h4>
            <span>高铁G/C</span>
            <span>动车D</span>
            <span>普通K/T/Z</span>
            <span>其他L/Y</span>
          </div>
          <div>
            <h4>出发车站</h4>
            <span>上海</span>
            <span>上海虹桥</span>
          </div>
        </div>
      </Popup>
    </div>
  )
}

export default Index
